<div class="login-status-header">
    <!-- If a user is logged in, display this welcome message -->
    <div *ngIf="isAuthenticated && userFullName" class="login-status-user-info">
        Welcome back {{ userFullName }}!
    </div>

    <!-- If user is not logged in yet, show login in  -->
    <button *ngIf="!isAuthenticated" routerLink="/login" class="security-btn">Login</button>

    <!-- If user is logged in, show log out button -->
    <button *ngIf="isAuthenticated" (click)="logout()" class="security-btn">Logout</button>

    <button *ngIf="isAuthenticated" routerLink="/members" class="security-btn ml-1">Member</button>

    <button *ngIf="isAuthenticated" routerLink="/order-history" class="security-btn ml-3">Orders</button>

</div>
